<template>
    <div id="application-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-divider content-position="left">{{ $t('l4vGAiubhrTaPWe5vDq1o') }}</el-divider>
            <v-form :formInfo="formInfoObj"></v-form>

            <el-form :model="ruleForm" size="default">
                <el-divider content-position="left">{{ $t('dqIm8ahxKjSzxhEGtZqjj') }}</el-divider>
                <template v-if="ruleForm.jobAudit">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('uk_220Omr0p3DgKxFxwB4')">
                                <span style="padding-left: 15px;" class="path_look">{{ ruleForm.jobAudit.v_AuditStateName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('yWlZaJa1f1JfgeQdGbln')">
                                <el-input readonly v-model="ruleForm.jobAudit.auditEmpName" :placeholder="$t('yWlZaJa1f1JfgeQdGbln')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('xxAj6fsjvIsQrMdlNpolv')">
                                <el-input readonly v-model="ruleForm.jobAudit.createdTime" :placeholder="$t('xxAj6fsjvIsQrMdlNpolv')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('v7AhfaNeGaFoPfZzgpFk')">
                                <el-input readonly v-model="ruleForm.jobAudit.createdUserName" :placeholder="$t('v7AhfaNeGaFoPfZzgpFk')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('hMMqYalIdWhk0McqdxTg')">
                                <el-input readonly v-model="ruleForm.jobAudit.updatedTime" :placeholder="$t('hMMqYalIdWhk0McqdxTg')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('chXoGxJdA1qLjRvlk9')">
                                <el-input readonly v-model="ruleForm.jobAudit.updatedUserName" :placeholder="$t('pYQp1FsnbOIcPfWkFgDa')" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-else>
                    <div class="havent-i">{{ $t('xXi3J7eKnKrhW9gR0d4Nc') }}</div>
                </template>
            </el-form>

            <el-divider content-position="left"> {{ $t('eHdy6iUn3cS1Nqd3eXMnV') }} </el-divider>
            <el-table class="table-s" :data="fileListArr" style="width: 100%" border>
                <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                    <template #default="scope">
                        <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                    </template>
                </el-table-column>
                <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                    <template #default="scope">
                        <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('9YxdWp3OFxHvMW4VGh71') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import getTableData from '/@/utils/getTableData'
import VForm from './v-form.vue'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: any,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'application-detail',
    components: { VForm },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        formInfo: {
            type: Object,
            default: {}
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        const fileListArr: any = ref([])
        const formInfoObj = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelDetailClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelDetailClick')
        }
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = $t('w9KxAyYCobkSVylEmF3nB')
                let getData = JSON.parse(props.repairInfo)
                formInfoObj.value = props.formInfo

                if(getData.v_JobFilePath && getData.v_JobFilePath.length !== 0){
                    fileListArr.value = getData.v_JobFilePath
                }else{
                    fileListArr.value = [] 
                }

                // 审批状态
                if(getData.jobAudit){
                    if(getData.jobAudit.n_AuditState < 0){
                        getData.jobAudit.v_AuditStateName = $t('w4VhwoPcGmZvsLAw9Ejgt')
                    }else if(getData.jobAudit.n_AuditState === 0){
                        getData.jobAudit.v_AuditStateName = $t('gf0Sq2nS1hOty874oBt4g')
                    }else if(getData.jobAudit.n_AuditState === 1){
                        getData.jobAudit.v_AuditStateName = $t('yGsrk2SvPdeMMz9RtDiLl')
                    }else if(getData.jobAudit.n_AuditState === 2){
                        getData.jobAudit.v_AuditStateName = $t('1Eky213Jts1mf6p7goA9L')
                    }else if(getData.jobAudit.n_AuditState === 3){
                        getData.jobAudit.v_AuditStateName = $t('u9BFyR2tsG3wjB01C77Rw')
                    }
                }
                state.ruleForm = getData
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            pathData,
            formLabelWidth: '100px',
            fileListArr,
            formInfoObj,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    // :deep(.el-divider__text){
    //     color: #303133;
    //     font-weight: bold;
    // }
    .havent-i{
        width: 100%;
        padding: 30px;
        text-align: center;
        color: #606266;
    }
    .path_look{
        display: block;
        width: 100%;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        span{
          display: block;
          margin-left: 15px;  
          color: #606266;
        }
    }
    .second-level-detail{
        width: 100%;
        margin: auto;
        padding: 10px;
        border: 1px solid #fcfafa;
        border-radius: 2px;
    }
    .data-detail{
        width: 100%;
        border: 1px solid #fcfafa;
        border-radius: 2px;
        padding: 10px;
    }
</style>